<ui:composition xmlns = "http://www.w3.org/1999/xhtml"
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:f = "http://java.sun.com/jsf/core"
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:p = "http://primefaces.org/ui"
   template = "/templates/masterLayout.xhtml">
   <ui:define name = "content"> 
     <h:form id = "form">
     
     <p:growl id="growl" showDetail="true"/>
      
     <h:inputHidden id="isSeletedRow" value="#{productControlBean.isSeletedRow}" />
       
     <p:dataTable id = "products" 
                  var = "product" 
                  value = "#{productControlBean.products}" 
                  paginator = "true" 
                  rows = "20" 
                  paginatorPosition = "bottom" 
                  selection = "#{productControlBean.selectedRow}" 
                  selectionMode = "single" 
                  rowKey = "#{product.code}">  
           <p:ajax event="rowSelect" listener="#{productControlBean.onRowSelected}"  update=":form:isSeletedRow :form:growl" />
            
        <f:facet name = "header">  

        	<p:commandButton id = "AddCommand" 
                             value = "Add" 
                             icon = "ui-icon-plus"  
                             update = ":form:displaySelectRow" 
                             oncomplete = "handleComplete(xhr,status,args)"  
                             style = "float:left"/>  
                             
        	<p:commandButton id = "MaintainCommand" 
                             value = "Maintain" 
                             icon = "ui-icon-gear"  
                             update = ":form:displaySelectRow" 
                             action = "#{productControlBean.toMaintainProduct}"
                             style = "float:left"/>
        	<p:commandButton id = "DeleteCommand" 
                             value = "Delete" 
                             icon = "ui-icon-minus"  
                             update = ":form:displaySelectRow" 
                             oncomplete = "handleComplete(xhr,status,args)"  
                             style = "float:left"/>                                                             
            <p:commandButton id = "viewCommand" 
                             value = "View" 
                             icon = "ui-icon-search"  
                             update = ":form:displaySelectRow" 
                             oncomplete = "viewProduct()"
                             style = "float:left"/>
            
            <script type= "text/javascript">
	            function isSelectedRow() {
	            	return $('[id="form:isSeletedRow"]').val() == 'true' ;
	            }
			   	function checkSelectedRow() {
		       		if (!isSelectedRow()) {
		    			alertDialog.show();
		    		}
	        	}             
            	function viewProduct() {
            		if (isSelectedRow()) {
            			viewProductDialog.show() ;
            		} else {
            			alertDialog.show();
            		}
            	}
            </script>
        </f:facet>  
        
        <p:column style = "width:50px" >  
            <p:graphicImage width="40" height="30" url="/images/product/#{product.picture}" />  
        </p:column>  
        
        <p:column headerText = "#{res['product.code']}" >  
            #{product.code}  
        </p:column>  
        
        <p:column headerText = "#{res['product.short.name']}" >  
            #{product.shortName}  
        </p:column> 
        
 
  
        <p:column headerText = "#{res['product.barcode']}" >  
            #{product.barCode}  
        </p:column>  
  
        <p:column headerText = "#{res['product.long.name']}" >  
            #{product.longName}  
        </p:column>  
  
        <p:column headerText = "#{res['product.weight']}" >  
            #{product.weight}  
        </p:column>  
  
         <f:facet name = "footer">  

         </f:facet> 
    </p:dataTable>  
    
    <ui:include src="product_view.xhtml">
    	<ui:param  name="selectedProduct" value="#{productControlBean.selectedRow}" /> 
    </ui:include>
          
           <p:confirmDialog id="alertDialog" widgetVar="alertDialog"
                            header="#{res['alert.window.header']}"
                            message="#{res['alert.window.not.selectrow']}"
                            modal = "true" 
                            position="center"
                            appendToBody = "True"
                            width = "400"
                            heigh = "240"
                            severity="alert" >  
  	            <p:commandButton id="alertDialogOKButton" value="OK"  oncomplete="alertDialog.hide()" />  
          </p:confirmDialog>  
     </h:form>
   </ui:define>      
</ui:composition>